<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>M-BOX</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!--标准mui.css-->
        <link rel="stylesheet" href="../css/mui.min.css">
        <style type="text/css">
            .mui-content>.mui-table-view:first-child {
                margin-top: 0px;
            }
        </style>
    </head>

    <body>
        <div class="mui-content">
            <ul id="list" class="mui-table-view mui-table-view-chevron"></ul>
        </div>
    </body>
    
    <script src="../js/mui.min.js "></script>
    <script src="../js/mui.lazyload.js"></script>
    <script src="../js/mui.lazyload.img.js"></script>
    <script>
        mui.init();
        
        var url = "http://s.music.163.com/search/get/";       
        mui.ajax(url,{
            data: {
                'type': 1, 
                's': "喜欢你",
                'limit': 10
            },
            dataType:'json',//服务器返回json格式数据
            type:'post',//HTTP请求类型
            timeout:10000,//超时时间设置为10秒；
            success:function(data){
                console.log(JSON.stringify(data)); 
                var songs=data.result.songs;

                var list = document.getElementById("list");
                var fragment = document.createDocumentFragment();
                var li;
                mui.each(songs,function(index,item){
                     var id = item.id,
                        name = item.album.name,
                        author = item.artists[0].name,
                        picUrl = item.album.picUrl,
                        audio = item.audio;      
                        
                    li = document.createElement('li');
                    li.className = 'mui-table-view-cell mui-media';
                    li.innerHTML = '<a class="mui-navigate-right" id='+ id +' data-audio='+ audio +'>'+
                                        '<img class="mui-media-object mui-pull-left" data-lazyload="'+picUrl+'">'+
                                        '<div class="mui-media-body">'+name+
                                            '<p class="mui-ellipsis">'+author+'</p>'+
                                        '</div>'+
                                    '</a>';
                    fragment.appendChild(li);
                })
                
                list.appendChild(fragment)
                
                mui(document).imageLazyload({
                    placeholder: '../img/60x60.gif'
                });
            },
            error:function(xhr,type,errorThrown){
                //异常处理；
                console.log(type);
            }
        });
        
        //列表点击事件
        mui("#list").on('tap','li a',function(){
            var id = this.getAttribute('id');
            var audio = this.getAttribute('data-audio');
            //打开详情页面
            mui.openWindow({
                url:'music.html',
                id:'music.html',
                extras:{
                    musicId:id,
                    audioUrl:audio
                }
            });
        });
    </script>
</html>